<style lang="scss" scoped>
@import '../../style/mixin-rem.scss';
.book-case-details-content-intro {
  position: relative;
  margin: rem(24px) 0;
  font-size: rem(36px);
  line-height: rem(50px);
  height: rem(150px);
  overflow: hidden;
  color: #42464e;
  .content {
    margin: 0;
    font-size: rem(36px);
    line-height: rem(50px);
  }
  .switchBtn {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #fff;
    padding-left: rem(10px);
    line-height: rem(50px);
    color: #2f58d8;
  }
}
</style>

<template>
  <div class="book-case-details-content-intro" ref="introWrapper">
    <p class="content" ref="introContent" v-text="intro"></p>
    <span class="switchBtn" v-show="btnIsShow" @click="unfoldIntroContent">...展开</span>
  </div>
</template>

<script>
export default {
  name: 'bookCaseDetailsContentIntro',
  data () {
    return {
      btnIsShow: true
    }
  },
  computed: {
    intro () {
      return this.$store.state.bookDetails.intro
    }
  },
  watch: {
    intro () {
      setTimeout(() => {
        this.setBtnByHeight()
      }, 60)
    }
  },
  methods: {
    setBtnByHeight () {
      if (this.$refs.introContent.clientHeight <= 150) {
        this.btnIsShow = false
      }
    },
    unfoldIntroContent () {
      this.$refs.introWrapper.style.height = 'auto'
      this.btnIsShow = false
    },
    shutIntroContent () {
      this.$refs.introWrapper.style.height = ''
      this.btnIsShow = true
    }
  }
}
</script>
